<script setup>
	import { ref, onMounted, nextTick, onBeforeUnmount, computed } from 'vue'
	import modal from '../modal/modal.vue'
	const modalRef = ref(null)
	const props = defineProps({
		content: { type: [String, Object], default: 'toast' },
		duration: { type: [Number, String], default: 2000 },
		success: { type: Function, default: () => { } },
		type: { type: String, default: 'center' }, // 弹出方式 top center bottom left right
		transName: { // 动画，结合自带动画名称o-fade, o-move-bottom ...
			default: 'o-zoom'
		},
		style: {
			default: {}
		},
		show: { // 显示弹窗
			default: false,
		},
		custom: { // 是否自定义
			default: true,
		},
		maskBackground: {
			default: 'rgba(0,0,0,0)'
		},
		maskClick: { // 蒙层点击是否关闭弹窗
			default: false
		},
		mask: { // 是否显示蒙层
			default: false,
		},
		image: { // 自定义图片图标
			default: ''
		},
		ico: { // 图标
			default: ''
		}
	})

	let timer = null

	const open = () => {
		if (timer) return
		if (props.duration > 0) {
			timer = setTimeout(close, props.duration)
		}
		modalRef.value.open()
	}
	const close = () => {
		modalRef.value.close()
		props.success()
		timer = null
	}
	const changed = () => {
		modalRef.value.destroy()
	}

	onMounted(() => {
		open()
		nextTick(() => {
			// window.addEventListener('hashchange', close)
		})
	})

	onBeforeUnmount(() => {
		// window.removeEventListener('hashchange', close)
	})

</script>

<template>
	<modal ref="modalRef" v-bind="props" @changed="changed">
		<div class="o-pop-toast">
			<div class="o-pop-toast__cont" :style="style">
				<div class="icon" v-if="image"><img :src="image"></div>
				<div class="icon" v-if="ico">
					<i :class="`ico-${ico}`" text="50"></i>
				</div>
				<div class="f28">{{content}}</div>
			</div>
		</div>
	</modal>
</template>

<style lang="scss" scoped>
	.o {
		&-pop-toast {
			text-align: center;

			&__cont {
				display: inline-block;
				padding: .75em 1em;
				margin: 1em;
				color: white;
				background: rgba(0, 0, 0, .8);
				border-radius: .25em;
				max-width: 90vw;
				max-height: 70vh;
				overflow: auto;

				.icon {
					margin: 0 auto;
					text-align: center;
					max-width: 5em;
					padding-bottom: 20px;

					img {
						max-width: 100%;
					}
				}
			}
		}


	}
</style>